<template>
  <b-container class="bv-example-row">
    <b-row>
      <b-col v-for="item in items" v-if="item.name">
        <b-card :title="item.name" tag="article" style="max-width: 20rem;" class="mb-2">
          <p class="card-text">
            {{getDescription(item)}}
          </p>
          <div slot="footer">
              <b-link class="card-link"> <router-link :to="item.meta.link">前往</router-link></b-link>
          </div>
        </b-card>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters({
      parent: "report"
    }),
    parentPath() {
      return this.parent ? this.parent.path : "";
    },
    items() {
      return (this.parent ? this.parent.children : []).filter(
        item => item.path
      );
    }
  },
  methods: {
    getActions(item) {
      return [
        {
          text: "Repository",
          icon: "github",
          href: item.meta && item.meta.repository
        },
        {
          text: "Demo",
          icon: "link",
          name: item.name
        }
      ];
    },
    getDescription(item) {
      return item.meta && item.meta.description;
    }
  }
};
</script>

<style scoped>
</style>
